<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon"  href="favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <div id="app">
        <div class="loader"></div>
    </div>
    <style>
        .loader,
        .loader::before,
        .loader::after {
            width: 1.5em;
            height: 1.5em;
            border-radius: 50%;
            animation: load-animation 1.8s infinite ease-in-out;
            animation-fill-mode: both;
        }
        .loader {
            position: absolute;
            top: 46%;
            left: 50%;
            color: #a8a5a5;
            transform: translate(-50%, -50%);
            animation-delay: -0.16s;
        }
        .loader::before,
        .loader::after {
            position: absolute;
            top: 0;
            content: "";
        }

        .loader::before {
            left: -3.5em;
            animation-delay: -0.32s;
        }

        .loader::after {
            left: 3.5em;
        }
        @keyframes load-animation {
            0%,
            80%,
            100% {
                box-shadow: 0 2.5em 0 -1.3em;
            }
            40% {
                box-shadow: 0 2.5em 0 0;
            }
        }
    </style>
    <script type="module" src="/src/main.ts"></script>
  </body>

</html>
